﻿@{
    Layout = "_LayoutMobile";
    ViewBag.Title = "加工订单管理";
}
@section header {
    <style>
        #app {
            padding-top: 0;
        }

        .margin5{
            margin:5px;
            width:calc(100% - 10px);
        }

        .bottombutton {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            padding: 10px;
        }

        .bottombutton .width50{
            width: 50%;
        }

        .add {
            position: fixed;
            z-index: 100;
            top: 13px;
            right: 10px;
        }
    </style>
}
<van-icon name="add" class="add" color="#1989fa" size="24" @@click="goHome"></van-icon>
<van-dropdown-menu :close-on-click-outside="false">
    <van-dropdown-item v-model="listConditions.machiningtype" :options="machiningtypes" @@change="onMachiningType"></van-dropdown-item>
    <van-dropdown-item title="筛选" ref="custom">
        <van-field v-model="listConditions.partnername" clearable label="布行名" placeholder="请输入用户名、拼音码"></van-field>
        <van-field v-model="listConditions.deliveryman" clearable label="送货人" placeholder="请输入送货人"></van-field>
        <van-cell title="送货日期" :value="listConditions.date_s||'请选择开始时间'" @@click="showDateStart"></van-cell>
        <van-cell title=" " :value="listConditions.date_e||'请选择结束时间'" @@click="showDateEnd"></van-cell>
        <div class="bottombutton">
            <van-button plain
                        border-color="#e2e2e2"
                        class="margin-top20 width50"
                        @@click="onSearchCancel">重置</van-button>
            <van-button type="primary" class="margin-top20 width50" @@click="onSearchConfirm">确认</van-button>
        </div>
    </van-dropdown-item>
</van-dropdown-menu>
<van-list v-model="isLoading"
          :finished="finished"
          finished-text="没有更多了"
          @@load="onLoad">
    <van-cell value-class="flex-align-end" class="margin5" v-for="(item,idx) in pageList" :key="item.ID" :url="'@Url.Action("MobileViewDetail","Machining")/'+item.ID">
        <template slot="title">
            <div class="flex-align">
                <van-tag type="success">{{item.MachiningTypeText}}</van-tag>
                <span class="font-size3 bold">{{item.PartnerName||''}}</span>
                <span class="van-cell__label">{{item.DeliveryMan||''}} {{item.DeliveryDate||''}}</span>
            </div>
        </template>
        <template slot="label">
            <span class="font-size3 bold">{{item.Rolls}}卷 {{item.Meters}}米*{{item.Price}}元={{item.Total}}元</span>
        </template>
    </van-cell>
</van-list>

<van-cell value-class="flex-align-end" style="bottom: 48px;position: fixed;">
    <template slot="title">
        <div class="flex-align">
            <span class="font-size3 bold">合计</span>
            <span class="van-cell__label">{{listData.listsumtotal.length>0?listData.listsumtotal[0]:0}}卷，{{listData.listsumtotal.length>1?listData.listsumtotal[1]:0}}米</span>
        </div>
    </template>
    <template slot="default">
        <span class="font-size3 bold">{{listData.listsumtotal.length>2?listData.listsumtotal[2]:0}}元</span>
    </template>
</van-cell>
<van-popup v-model="showSearchDate" position="bottom">
    <van-datetime-picker v-model="currentDate" type="date"
                         @@cancel="showSearchDate = false"
                         @@confirm="onSearchDateConfirm"></van-datetime-picker>
</van-popup>
@section footer {
        <script type="text/javascript">
        var listConditionsInit = { machiningtype:"0",partnername:'',deliveryman:'',date_s:'',date_e:'' };//初始查询条件
                var pageEnumData = {
                    machiningtypes:@(Json.Serialize(ViewBag.MachiningTypes))
                };
                var pageApp = new Vue({
                     el: '#app',
                        data: {
                            active: 'machining',
                            machiningtypes: pageEnumData.machiningtypes,
                            listConditions: Object.assign({}, listConditionsInit),
                            listSortColumn: {
                                name: "",
                                order:""
                            },
                            isLoading:false,
                            finished:false,
                            listData: {
                                checked:false,
                                list: [],
                                total: 0,
                                pnum: 0,
                                psize:20,
                                sumcol: [],
                                listsumtotal: [],
                                pagesumtotal: []
                            },
                            showSearchDate:false,
                            SearchDateField:'date_s',
                            currentDate:new Date()
                        },
                            mounted: function(){
                                    const filter = this.listData;
                                    filter.pnum = 0;
                                    filter.list=[];
                                },
                            methods: {
                                goBack(){
                                    window.location.href = '@(Url.Action("MobileList", "Machining"))';
                                },
                                goHome(){
                                    window.location.href = '@(Url.Action("MobileAdd", "Machining"))';
                                },
                                onLoad(){
                                    const  _this=this;
                                    const _listData=_this.listData;
                                    const filter =  Object.assign({}, _this.listConditions, {pnum:_listData.pnum+1,psize:_listData.psize});
                                    utils.ajaxPost('@(Url.Action("Search", "Machining"))', filter, function (resp) {
                                        var list = resp.data.list.map(function (item) {
                                            return Object.assign({}, item, {
                                                CheckedState: false,
                                            });
                                        });
                                        var sumcol = resp.data.sumcol || [];
                                        var sumtotal = resp.data.sumtotal || [];
                                        var pagesumtotal = sumcol.map(function (col) {
                                            return resp.data.list.reduce(function (total, cur) {
                                                return total + cur[col];
                                            }, 0);
                                        });
                                        var newData = { sumcol: sumcol, listsumtotal: sumtotal, pagesumtotal: pagesumtotal, list: [..._listData.list, ...list], total: resp.data.total, pnum: resp.data.pnum, psize: resp.data.psize, checked: false };
                                        _this.listData = newData;
                                        _this.isLoading = false;
                                        _this.finished=filter.pnum*filter.psize>=newData.total;
                                    }, function (err) {
                                    });
                                },
                                onMachiningType() {
                                    const filter = this.listData;
                                    filter.pnum = 0;
                                    filter.list=[];
                                    this.onLoad();
                                },
                                showDateStart(){
                                    this.showSearchDate=true;
                                    this.SearchDateField='date_s';
                                },
                                showDateEnd(){
                                    this.showSearchDate=true;
                                    this.SearchDateField='date_e';
                                },
                                onSearchDateConfirm(value){
                                    this.showSearchDate=false;
                                    const filter = this.listConditions;
                                    filter[this.SearchDateField]=this.$options.filters.formatDate(value);
                                },
                                onSearchConfirm() {
                                    const filter = this.listData;
                                    filter.pnum = 0;
                                    filter.list = [];
                                    this.onLoad();
                                    this.$refs.custom.toggle();
                                },
                                onSearchCancel() {
                                    const listConditions = this.listConditions;
                                    listConditions.machiningtype = "0";
                                    listConditions.partnername = "";
                                    listConditions.deliveryman = "";
                                    listConditions.date_s = "";
                                    listConditions.date_e = "";
                                    const filter = this.listData;
                                    filter.pnum = 0;
                                    filter.list = [];
                                    this.onLoad();
                                    // this.$refs.custom.toggle();
                                },
                    },
                    computed: {
                        pageList: function () {
                            var _this = this;
                            return this.listData.list.map(function (item) {
                                return Object.assign({}, item, {
                                    StateNow: _this.$options.filters.formatState(item.StateNow),
                                });
                            });
                        },
                    },
                    filters: {
                        formatState: function (val) {
                            return utils.formatEnum(val, pageEnumData.state);
                        },
                        formatDate: function (val) {
                            return utils.formatDate(val, 'yyyy-MM-dd');
                        },
                    },
                });
                $(function () {
                    if(!isMobile())
                    {
                            window.location.href = '@(Url.Action("List", "Machining"))';
                    }
                });

                function isMobile() {
                  const regExp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
                  return regExp.test(navigator.userAgent);
                }
            </script>
}